<template>
	<view class="webview-container">
		<!-- #ifdef H5 -->
		<web-view class="webview1" :src="url2" @message="onMessage2"></web-view>
		<!-- #endif -->

		<!-- #ifndef H5 -->
		<web-view class="webview2" :src="url" @message="onMessage"></web-view>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		wxGetTxMapByLatLng
	} from '../../common/service.js'
	export default {
		data() {
			return {
				height: uni.getSystemInfoSync().screenHeight,
				url: '../../hybrid/html/map.html',
				url2: '',
				hasSelected: false,
				storeItem: {}
			}
		},
		onLoad: function(option) {
			const that = this;
			console.log('webView页面-option：');
			console.log(option);
			uni.getStorage({
				key: 'storeItem',
				success: function(res) {
					console.log('检测到storeItem：');
					console.log(res.data);
					that.storeItem = res.data;
					if (!that.storeItem.preId) {
						if (option.preId) {
							that.storeItem.preId = option.preId;
						}
					}
					if (option.lat && option.lng) {
						that.url = that.url + '?lat=' + option.lat + '&lng=' + option.lng;
						that.url2 =
							'https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=EGJBZ-AXTKP-575D6-LYW46-QDQRS-PHF6G&referer=myapp&coord=' +
							option.lat + ',' + option.lng + '&coordtype=5&radius=2000&total=10&zoom=15';
						console.log('当前webView地址：');
						console.log(that.url);
						console.log(that.url2);
					}
				},
				fail: function(e) {
					console.log('检测不到storeItem, 返回上一页');
					console.log(e);
					uni.navigateBack({
						delta: 1,
						animationType: 'pop-out',
						animationDuration: 1
					});
				}
			});
		},
		onReady() {
			const that = this;
			//#ifdef H5
			if (window.isListen === true) {
				// 防止多次注册addEventListener事件
				return
			}
			window.addEventListener('message', function(event) {
				console.log('接收网页消息location:');
				console.log(event);
				// const data = event.data.data.arg;
				const data = event.data.data ? event.data.data.arg : event.data;
				console.log(data);
				if (data && data.module == 'locationPicker') {
					console.log(data);
					that.handleDataFn(data);
					that.hasSelected = false;
				};
				window.isListen = true;
				window.removeEventListener('message', function() {}, true)
			}, false)
			//#endif
		},
		onShow() {
			this.hasSelected = false;
		},
		methods: {
			onMessage2(e) {
				console.log('onMessage2消息:');
				console.log(e);
			},
			onMessage(e) {
				console.log('app接收网页消息:');
				console.log(e);
				const data = e.detail.data[0];
				console.log(data);
				this.handleDataFn(data);
			},
			saveAddressInfo(lng, lat, address, call) {
				const that = this;
				that.storeItem.longitude = lng;
				that.storeItem.latitude = lat;
				that.storeItem.storeAddress = address;
				const latLng = new qq.maps.LatLng(lat, lng);
				that.myGeocoder(lng, lat, function() {
					if (call) {
						call();
					}
				})
			},
			myGeocoder(lng, lat, callback) {
				const that = this;
				uni.showLoading({
					title: '获取信息中...',
					mask: true
				});
				// 经纬度转地址
				// const geocoder = new qq.maps.Geocoder({
				// 	complete: function(result) {
				// 		console.log('根据经纬度, 转地址:');
				// 		console.log(result);
				// 		that.storeItem.province = result.detail.addressComponents.province || '';
				// 		that.storeItem.city = result.detail.addressComponents.city || '';
				// 		that.storeItem.area = result.detail.addressComponents.district || '';
				// 		that.storeItem.street = (result.detail.addressComponents.town || '') + (result.detail.addressComponents.street ||
				// 			'') + (result.detail.addressComponents.streetNumber || '');
				// 		// that.storeItem.storeAddress = that.storeItem.province + that.storeItem.city + that.storeItem.area + that.storeItem
				// 		// 	.street;
				// 		console.log('转地址之后补全storeItem信息:');
				// 		console.log(that.storeItem);
				// 		uni.hideLoading();
				// 		if (callback) {
				// 			callback();
				// 		}
				// 	}
				// });
				// geocoder.getAddress(latLng);
				wxGetTxMapByLatLng({"lat":lat,"lng":lng}, (res)=>{
					if(res.data.status=='00000'){
						let result = res.data.data.result
						that.storeItem.province = result.address_component.province || '';
						that.storeItem.city = result.address_component.city || '';
						that.storeItem.area = result.address_component.district || '';
						that.storeItem.street = (result.address_component.town || '') + (result.address_component.street || '') + (result.address_component.streetNumber || '');
						uni.hideLoading();
						if (callback) {
							callback();
						}
					}else{
						uni.showToast({
							message: res.data.message,
							duration: 2000,
							icon: 'error'
						})
					}
				})
			},
			handleDataFn(data) {
				const that = this;
				if (data.module === 'locationPicker') {
					console.log('执行handleDataFn; 当前hasSelected：' + that.hasSelected);
					if (that.hasSelected === true) {
						return;
					}
					that.hasSelected = true;
					uni.showLoading({
						title: '获取数据中',
						mask: true
					});
					console.log('已选择 经度lng：' + data.latlng.lng + ',纬度lat:' + data.latlng.lat);
					that.saveAddressInfo(data.latlng.lng, data.latlng.lat, ((data.address || '') + (data.poiname || '')), function() {
						console.log('门店信息前storeItem检查:');
						console.log(that.storeItem);
						that.storeItem.isNeedEdit = true;
						that.storeItem.MyRemark = that.storeItem.remark || '';
						setTimeout(function() {
							uni.setStorage({
								key: 'storeItem',
								data: that.storeItem,
								success(e) {
									uni.hideLoading();
									// uni.$emit('globleEventAddressChange', that.storeItem);
									// const sysType = uni.getSystemInfoSync().platform;
									console.log('已存储PC端门店信息（保存经纬度），返回上一页。');
									that.hasSelected = false;
									uni.navigateBack({
										delta: 1
									});
									// if (sysType === 'ios') {
									// 	console.log('运行iOS上');
									// 	uni.navigateBack({
									// 		delta: 1
									// 	});
									// } else if (sysType === 'android') {
									// 	console.log('运行Android上');
									// 	uni.navigateBack({
									// 		delta: 2
									// 	});
									// } else {
									// 	console.log('运行在开发者工具上');
									// 	uni.navigateBack({
									// 		delta: 2
									// 	});
									// }
								}
							});
						}, 40)
					})
				}
			}
		}
	}
</script>

<style>
	page,
	.webview-container {
		width: 100%;
		height: 100%;
	}
</style>
